
<mat-card class="h-100">
  <mat-card-content class="h-100">

    <div class="row h-100">
      <div class="col-12 d-flex flex-column h-100">

        <div class="row">
          <div class="col-12">
            <p class="mt-0 mb-4 mat-body-2 fw-bold">Overview</p>
          </div>
        </div>

        <div class="scrollable-row">
          <div class="row mb-3" *ngFor="let item of displayableList">
            <div class="col-6 text-muted">
              {{item.name}}
            </div>
            <div class="col-6 text-uppercase">{{data[item.key] ?? '-'}}</div>
          </div>
        </div>

        <button
          mat-button
          color="primary"
          class="w-100 mt-auto"
          (click)="more()">
          More information
        </button>

      </div>
    </div>

  </mat-card-content>
</mat-card>
